import React from 'react';
import { Chart } from '@antv/g2';

const data = [
    { ctype: '未知', value: 654, percent: 0.02 },
    { ctype: '17 岁以下', value: 654, percent: 0.02 },
    { ctype: '18-24 岁', value: 4400, percent: 0.2 },
    { ctype: '25-29 岁', value: 5300, percent: 0.24 },
    { ctype: '30-39 岁', value: 6200, percent: 0.28 },
    { ctype: '40-49 岁', value: 3300, percent: 0.14 },
    { ctype: '50 岁以上', value: 1500, percent: 0.06 },
];
var chart;
class G2ColumnBsc extends React.Component {
    componentDidMount() {
        this.props.onRef(this);
        this.chartInit();
        this.loadData();
    }
    chartInit = () => {
        chart = new Chart({
            container: 'G2ColumnBsc',
            autoFit: true,
            height: this.props.height,
            padding: [50, 20, 50, 20],
        });
        chart.data(data);
        chart.scale('value', {
            alias: '交易额(元)'
        });

        chart.axis('ctype', {
            tickLine: {
                alignTick: false,
            },
        });
        chart.axis('value', true);

        chart.tooltip({
            showMarkers: false,
        });
        chart.interval().position('ctype*value');
        chart.interaction('active-region');

        // 添加文本标注
        data.forEach((item) => {
            chart
                .annotation()
                .text({
                    position: [item.ctype, item.value],
                    content: item.value,
                    style: {
                        textAlign: 'center',
                    },
                    offsetY: -30,
                })
                .text({
                    position: [item.ctype, item.value],
                    content: (item.percent * 100).toFixed(0) + '%',
                    style: {
                        textAlign: 'center',
                    },
                    offsetY: -12,
                });
        });
    }
    loadData = () => {
        const { ParentData } = this.props;
        chart.changeData(ParentData);
        chart.render();
    }
    render() {
        return (
            <div id='G2ColumnBsc'></div>
        )
    };
}
export default G2ColumnBsc;